﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>filter-滤镜</title>

		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
			#sourceDiv {
				text-align: center;
				border: 2px solid white;
			}
			
			#source {
				width: 50%;
				height: 50%;
				display: inline-block;
				vertical-align: middle;
			}
			
			#target1 {
				left: 0;
				border: 2px solid black;
			}
			
			#target2 {
				border: 2px solid black;
			}
			
			#target3 {
				border: 2px solid black;
			}
			
			#target4 {
				border: 2px solid black;
			}
			
			#target5 {
				border: 2px solid black;
			}
			
			#target6 {
				border: 2px solid black;
			}
			
			.mui-table-view:after {
				height: 0;
			}
			
			.mui-table-view:before {
				height: 0;
			}
			
			.mui-table-view.mui-grid-view {
				background-color: #E8EDF1;
			}
			
			.my-tableview {
				font-size: inherit !important;
				padding: -1px 10px 10px 10px !important;
			}
			
			.my-tableview .mui-table-view-cell {
				left: 3px;
				padding: 0 0 0 0 !important;
			}
			
			.my-tableview .mui-table-view-cell>a:not(.mui-btn) {
				margin: 0 !important;
			}
		</style>
	</head>

	<body>
		<div class="mui-navbar-inner mui-bar mui-bar-nav">
			<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>
			</button>
			<h1 class="mui-center mui-title">请选择滤镜方式</h1>
		</div>
		<div id="sourceDiv">
			<br></br>
			<img id="source" src=""/>
		</div>
		<div class="mui-content">
			<ul class="mui-table-view mui-grid-view mui-grid-12">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<div class="mui-media-body" style="font-size: 16px; color: #6F7072;">反色</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<div class="mui-media-body" style="font-size: 16px; color: #6F7072;">灰色调</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<div class="mui-media-body" style="font-size: 16px; color: #6F7072;">模糊</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="#">
						<canvas id="target1" class="mui-media-object" onclick="goback('target1')">
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		            	<a href="#">
			                <canvas id="target2" class="mui-media-object" onclick="goback('target2')">
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		            	<a href="#">
			                <canvas id="target3" class="mui-media-object" onclick="goback('target3')">
		            	</a>
		            </li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		            	<a href="#">
			                <div class="mui-media-body" style="font-size: 16px; color: #6F7072;">浮雕</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		            	<a href="#">
			                <div class="mui-media-body" style="font-size: 16px; color: #6F7072;">雕刻</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		            	<a href="#">
			                <div class="mui-media-body" style="font-size: 16px; color: #6F7072;">镜像</div>
		            	</a>
		            </li>
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		            	<a href="#">
			                <canvas id="target4" class="mui-media-object" onclick="goback('target4')">
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		            	<a href="#">
			                <canvas id="target5" class="mui-media-object" onclick="goback('target5')">
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
		            	<a href="#">
			                <canvas id="target6" class="mui-media-object" onclick="goback('target6')">
		            	</a>
		            </li>
		        </ul> 
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/h5filter.js"></script>
		<script>
			mui.init({
				swipeBack:true //启用右滑关闭功能
			}, false);
			var ws=null;
			mui.plusReady(function() {
				ws = plus.webview.currentWebview();
				//console.log(ws.mid);
				var source = document.getElementById("source");
				source.src = ws.mid;
				var canvas1 = document.getElementById("target1");
				canvas1.width = source.clientWidth / 2;
				canvas1.height = source.clientHeight / 2;
				if(!canvas1.getContext) {
					console.log("Canvas not supported. Please install a HTML5 compatible browser.");
					return;
				}
				var canvas2 = document.getElementById("target2");
				canvas2.width = source.clientWidth / 2;
				canvas2.height = source.clientHeight / 2;
				var canvas3 = document.getElementById("target3");
				canvas3.width = source.clientWidth / 2;
				canvas3.height = source.clientHeight / 2;
				var canvas4 = document.getElementById("target4");
				canvas4.width = source.clientWidth / 2;
				canvas4.height = source.clientHeight / 2;
				var canvas5 = document.getElementById("target5");
				canvas5.width = source.clientWidth / 2;
				canvas5.height = source.clientHeight / 2;
				var canvas6 = document.getElementById("target6");
				canvas6.width = source.clientWidth / 2;
				canvas6.height = source.clientHeight / 2;

				// get 2D context of canvas and draw image
				var tempContext = canvas1.getContext("2d");
				tempContext.drawImage(source, 0, 0, canvas1.width, canvas1.height);
				invertColor(tempContext);
				
				tempContext = canvas2.getContext("2d");
				tempContext.drawImage(source, 0, 0, canvas2.width, canvas2.height);
				adjustColor(tempContext);
				
				tempContext = canvas3.getContext("2d");
				tempContext.drawImage(source, 0, 0, canvas3.width, canvas3.height);
				blurImage(tempContext);
				
				tempContext = canvas4.getContext("2d");
				tempContext.drawImage(source, 0, 0, canvas4.width, canvas4.height);
				fudiaoImage(tempContext);
				
				tempContext = canvas5.getContext("2d");
				tempContext.drawImage(source, 0, 0, canvas5.width, canvas5.height);
				kediaoImage(tempContext);
				
				tempContext = canvas6.getContext("2d");
				tempContext.drawImage(source, 0, 0, canvas6.width, canvas6.height);
				mirrorImage(tempContext);
				
			});

			function invertColor(tempContext) {
				var canvas = document.getElementById("target1");
				var len = canvas.width * canvas.height * 4;
				var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
				var binaryData = canvasData.data;

				// Processing all the pixels
				gfilter.colorInvertProcess(binaryData, len);

				// Copying back canvas data to canvas
				tempContext.putImageData(canvasData, 0, 0);
			}

			function adjustColor(tempContext) {
				var canvas = document.getElementById("target2");
				var len = canvas.width * canvas.height * 4;
				var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);
				var binaryData = canvasData.data;

				// Processing all the pixels
				gfilter.colorAdjustProcess(binaryData, len);

				// Copying back canvas data to canvas
				tempContext.putImageData(canvasData, 0, 0);
			}

			function blurImage(tempContext) {
				var canvas = document.getElementById("target3");
				var len = canvas.width * canvas.height * 4;
				var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);

				// Processing all the pixels
				gfilter.blurProcess(tempContext, canvasData);

				// Copying back canvas data to canvas
				tempContext.putImageData(canvasData, 0, 0);
			}

			function fudiaoImage(tempContext) {
				var canvas = document.getElementById("target4");
				var len = canvas.width * canvas.height * 4;
				var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);

				// Processing all the pixels
				gfilter.reliefProcess(tempContext, canvasData);

				// Copying back canvas data to canvas
				tempContext.putImageData(canvasData, 0, 0);
			}

			function kediaoImage(tempContext) {
				var canvas = document.getElementById("target5");
				var len = canvas.width * canvas.height * 4;
				var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);

				// Processing all the pixels
				gfilter.diaokeProcess(tempContext, canvasData);

				// Copying back canvas data to canvas
				tempContext.putImageData(canvasData, 0, 0);
			}

			function mirrorImage(tempContext) {
				var canvas = document.getElementById("target6");
				var len = canvas.width * canvas.height * 4;
				var canvasData = tempContext.getImageData(0, 0, canvas.width, canvas.height);

				// Processing all the pixels
				gfilter.mirrorProcess(tempContext, canvasData);

				// Copying back canvas data to canvas
				tempContext.putImageData(canvasData, 0, 0);
			}
			
			function goback(targetid) {
				var cur;
				for (var i=1;i<7;i++) {
					var id = "target"+i;
					var canvas = document.getElementById(id);
					if (targetid == id) {
						canvas.style.borderColor="#FF0000";
						cur = canvas;
					} else {
						canvas.style.borderColor="#000000";
					}
				}
				var btnArray = ['取消', '确定'];
				mui.confirm('请确定选择了这种滤镜方式？', '爸妈Q', btnArray, function(e) {
					if (e.index == 1) {
						//确定
						//console.log(1);
						ws.mid = cur.toDataURL("image/png");
					} else {
						//取消
						//console.log(0);
					}
				});
			}
		</script>
	</body>

</html>